<template>
  <div class="clubPage">
    <div class="searchBox bgfff">
      <div class="tabsBox">
        <el-tabs v-model="type" @tab-click="handleClick">
          <el-tab-pane label="社团列表" name="1"></el-tab-pane>
          <el-tab-pane label="加入社团审核" name="2"></el-tab-pane>
        </el-tabs>
      </div>
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="社团名称：" prop="name">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="type == 1">
            <el-form-item label="社长姓名：" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="type == 2">
            <el-form-item label="申请人姓名：" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号：" prop="userTel" v-if="type == 1">
              <el-input v-model="form.userTel" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="mobile" v-if="type == 2">
              <el-input v-model="form.mobile" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="display: flex; justify-content: flex-end">
            <el-form-item style="margin-right: 0">
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <div class="tablesCardTop">
        <div></div>
        <el-button
          v-if="type == 1"
          type="primary"
          size="small"
          @click="
            () => {
              clubInfo = {};
              addClubShow = true;
            }
          "
          >新增</el-button
        >
      </div>
      <el-table
        v-if="type == 1"
        :data="tableData"
        border
        size="small"
        style="width: 100%"
      >
        <!-- height="580" -->
        <el-table-column prop="_code" label="序号" align="center" width="80">
        </el-table-column>
        <el-table-column prop="name" label="社团名称" align="center">
        </el-table-column>
        <el-table-column prop="memberCount" label="社团人数" align="center" />
        <el-table-column prop="userName" label="社长姓名" align="center">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" align="center" />
        <el-table-column prop="" label="社团封面" align="center">
          <template slot-scope="scope">
            <img
              width="60px"
              height="60px"
              :src="scope.row.pic"
              alt=""
            />
          </template>
        </el-table-column>

        <el-table-column prop="activeCount" label="已举办活动" align="center" />

        <el-table-column
          fixed="right"
          prop=""
          label="操作"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <div class="">
              <el-link type="primary" @click="onBtns(1, scope.row)"
                >查看</el-link
              >
              <el-divider direction="vertical"></el-divider>
              <el-link type="primary" @click="onBtns(2, scope.row)"
                >编辑</el-link
              ><el-divider direction="vertical"></el-divider>
              <el-popover
                :ref="`popover-${scope.row.id}`"
                popper-class="myPopover"
                placement="left"
                width="160"
                trigger="click"
              >
                <p class="text">
                  <i class="el-icon el-icon-warning"></i>
                  是否确认删除？
                </p>
                <div class="btnBox">
                  <el-button
                    size="mini"
                    @click="$refs[`popover-${scope.row.id}`].doClose()"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="onBtns(3, scope.row)"
                    >确定</el-button
                  >
                </div>
                <el-link type="danger" slot="reference">删除</el-link>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-else
        :data="tableData"
        border
        size="small"
        style="width: 100%"
      >
        <!-- height="580" -->
        <el-table-column prop="_code" label="序号" align="center" width="80">
        </el-table-column>
        <el-table-column prop="create_time" label="申请时间" align="center" />
        <el-table-column prop="clubs.name" label="申请社团" align="center">
        </el-table-column>
        <el-table-column
          prop="clubs.userName"
          label="社长姓名"
          align="center"
        />
        <el-table-column prop="userName" label="申请人" align="center" />
        <el-table-column prop="mobile" label="手机号" align="center" />
        <!-- <el-table-column prop="house.name" label="所在小区" align="center" /> -->
        <el-table-column prop="house.name" label="居民房屋" align="center" />
        <el-table-column prop="" label="审核状态" align="center">
          <template slot-scope="scope">
            {{
              scope.row.status == 1
                ? "未审核"
                : scope.row.status == 2
                ? "已通过"
                : "已拒绝"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="审核人" align="center">
          <template slot-scope="scope">
            {{ scope.row.audit?.userName }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          prop=""
          label="操作"
          align="center"
          width="90"
        >
          <template slot-scope="scope">
            <div class="">
              <el-link
                :disabled="scope.row.status != 1"
                type="primary"
                @click="onBtns(4, scope.row)"
                >审核</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          @size-change="
            (e) => {
              form.limit = e;
              getList();
            }
          "
          @current-change="
            (e) => {
              form.page = e;
              getList();
            }
          "
        >
        </el-pagination>
      </div>
    </div>
    <addClub
      v-if="addClubShow"
      @handleClose="
        (val) => {
          addClubShow = false;
          if (val) {
            getList();
          }
        }
      "
      :dialogVisible="addClubShow"
      :clubId="clubInfo.id"
    ></addClub>
    <el-dialog
      title="审核"
      width="350px"
      top="300px"
      :visible.sync="checkShow"
      :before-close="
        () => {
          checkShow = false;
        }
      "
    >
      <div class="checkdialogBody">
        <span>审核意见：</span>
        <el-radio-group v-model="radio">
          <el-radio :label="2">通过</el-radio>
          <el-radio :label="3">拒绝</el-radio>
        </el-radio-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="checkShow = false">取 消</el-button>
        <el-button size="small" type="primary" @click="onCheck()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  clubList,
  delClub,
  clubMemberList,
  clubMemberCheck,
} from "@/api/club.js";
import addClub from "./common/addClub.vue";
export default {
  name: "",
  props: [""],

  data() {
    return {
      type: "1",
      form: {
        name: "",
        userName: "",
        userTel: "",
        mobile: "",
        page: 1,
        limit: 20,
      },
      tableData: [],
      total: 0,
      projectId: "",
      checkShow: false,
      radio: 2,

      addClubShow: false,
      clubInfo: {},
    };
  },

  components: { addClub },

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList();
  },

  methods: {
    onSubmit() {
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    getList() {
      if (this.type == 1) {
        //社团列表
        clubList(this.form).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.count;
          }
        });
      } else {
        //申请入社团的成员列表
        clubMemberList(this.form).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.data;
            this.total = res.data.count;
          }
        });
      }
    },
    onBtns(val, info) {
      console.log(info, "infoinfoinfo");
      this.clubInfo = info;
      if (val == 1) {
        //查看
        this.$router.push({
          path: "clubActive",
          query: {
            clubId: info.id,
          },
        });
      } else if (val == 2) {
        //编辑
        this.addClubShow = true;
      } else if (val == 3) {
        //删除
        this.$refs[`popover-${info.id}`].doClose();
        delClub({ id: info.id }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          }
        });
      } else if (val == 4) {
        //审核
        this.checkShow = true;
      }
    },

    handleClick() {
      this.form.page = 1;
      this.getList();
    },
    onCheck() {
      //审核
      clubMemberCheck({ id: this.clubInfo.id, status: this.radio }).then(
        (res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.checkShow = false;

            this.getList();
          }
        }
      );
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.clubPage {
  .searchBox {
    margin-bottom: 14px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    height: 147px;
    .tabsBox {
      margin: 10px 0 20px;
      .el-tabs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-tabs__nav-wrap::after {
          background-color: rgba(0, 0, 0, 0);
        }
      }
    }
    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 200px;
      }
    }
  }
  .tablesCard {
  }
  .checkdialogBody {
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-bottom: 2px;
      margin-right: 10px;
    }
  }
}
</style>
